import { defineComponent, reactive, ref } from "vue";
import Page from "@/components/public/page/page";
import { CardWithTitle } from "@/components/public/card/card";
import { CircleStateTitle } from "@/components/public/dotStateTitle/dotStateTitle";
import LTable from "@/components/public/lTable/lTable";
import settlementOfClaimService from "@/modules/settlementOfClaim/settlementOfClaim.service";
import Detail from "./popup/Detail/Detail";
export default defineComponent({
  setup() {
    const state = reactive({
      toolbar: {
        left: ["refresh", "output"],
        right: ["filter", "search"],
      },
      dataSource: [],
      columns: [
        {
          title: "ID",
          dataIndex: "id",
          align: "center",
          width: "100px",
        },
        {
          title: "理赔类型",
          dataIndex: "kind_name",
          align: "center",
          width: "200px",
        },
        {
          title: "申请人手机号",
          dataIndex: "mobile",
          align: "center",
          width: "180px",
        },
        {
          title: "被保人姓名",
          dataIndex: "insurer_name",
          align: "center",
          width: "180px",
        },
        {
          title: "被保人身份证号",
          dataIndex: "insurer_idno",
          align: "center",
          width: "220px",
        },
        {
          title: "持卡人姓名",
          dataIndex: "benefiter_name",
          align: "center",
          width: "180px",
        },
        {
          title: "卡号",
          dataIndex: "card_no",
          align: "center",
          width: "220px",
        },
        {
          title: "银行",
          dataIndex: "bank",
          align: "center",
          width: "220px",
        },
        {
          title: "开户行",
          dataIndex: "open_bank",
          align: "center",
          width: "220px",
        },
        {
          title: "文件上传状态",
          dataIndex: "file_status",
          align: "center",
          width: "150px",
        },
        {
          title: "审批状态",
          dataIndex: "check_status",
          align: "center",
          width: "150px",
        },
        {
          title: "状态",
          dataIndex: "status",
          align: "center",
          width: "150px",
        },
        {
          title: "创建时间",
          dataIndex: "create_time",
          align: "center",
          width: "220px",
        },
        {
          fixed: "right",
          title: "操作",
          dataIndex: "operation",
          align: "center",
        },
      ],
      loading: false,
      searchForm: {
        insurer_name: {
          type: "input",
          label: "被保人姓名",
          attrs: { placeholder: "被保人姓名" },
        },
        insurer_idno: {
          type: "input",
          label: "被保人身份证号",
          attrs: { placeholder: "被保人身份证号" },
        },
        create_time: {
          type: "date_range",
          label: "创建日期",
        },
        status: {
          type: "select",
          label: "状态",
          attrs: { placeholder: "状态" },
          datas: [{ label: '已拒绝', value: 10 }, { label: '处理中', value: 20 }, { label: '已通过', value: 30 }],
        },
      },
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
      },
    } as any);
    // 服务
    const $service = new settlementOfClaimService();
    // 表格节点
    const LTableRef = ref(null as any);
    // 表格状态变更
    const tableChangeHandler = (pag: { pageSize: number; current: number }) => {
      state.pagination.current = pag.current;
      state.pagination.pageSize = pag.pageSize;
    };
    const DetailRef = ref(null as any);
    return () => (
      <Page>
        <CardWithTitle title="理赔列表">
          <LTable
            ref={LTableRef}
            service={$service}
            toolbar={state.toolbar}
            v-model={state}
          >
            <a-table
              bordered={true}
              scroll={{ x: "max-content" }}
              dataSource={state.dataSource}
              columns={state.columns}
              loading={state.loading}
              pagination={state.pagination}
              onChange={tableChangeHandler}
              rowKey="id"
              v-slots={{
                bodyCell: ({ column, record }: any) => {
                  // 操作栏
                  if (column.dataIndex === "operation") {
                    return (
                      <div class="operation">
                        <a-button
                          type="primary"
                          size="small"
                          onClick={() => {
                            DetailRef.value.open(record.id, 'detail');
                          }}
                        >
                          查看详情
                        </a-button>
                        <a-button
                          type="primary"
                          class="et-btn-warning"
                          size="small"
                          disabled={record.check_status !== 20}
                          onClick={() => {
                            DetailRef.value.open(record.id, 'approve');
                          }}
                        >
                          审批
                        </a-button>
                      </div>
                    );
                  }
                  // 文件上传状态
                  const FileStatus: any = () => {
                    switch (record.file_status) {
                      case 10:
                        return <CircleStateTitle type="danger" title="未上传"/>
                      case 20:
                        return <CircleStateTitle type="warning" title="待补充资料"/>
                      case 30:
                        return <CircleStateTitle type="success" title="已上传"/>
                    }
                  };
                  if (column.dataIndex === "file_status") {
                    return (
                      <FileStatus />
                    );
                  }
                  // 审批状态
                  const CheckStatus: any = () => {
                    switch (record.check_status) {
                      case 10:
                        return <CircleStateTitle type="danger" title="已拒绝"/>
                      case 20:
                        return <CircleStateTitle type="warning" title="待审核"/>
                      case 30:
                        return <CircleStateTitle type="success" title="已通过"/>
                    }
                  };
                  if (column.dataIndex === "check_status") {
                    return (
                      <CheckStatus />
                    );
                  }
                  // 状态
                  const Status: any = () => {
                    switch (record.status) {
                      case 10:
                        return <CircleStateTitle type="danger" title="已拒绝"/>
                      case 20:
                        return <CircleStateTitle type="warning" title="处理中"/>
                      case 30:
                        return <CircleStateTitle type="success" title="已通过"/>
                    }
                  };
                  if (column.dataIndex === "status") {
                    return (
                      <Status />
                    );
                  }
                },
              }}
            />
          </LTable>
        </CardWithTitle>
        <Detail ref={DetailRef} service={$service} onFinishApprove={() => LTableRef.value.$fetchTableData()} />
      </Page>
    );
  },
});